<template>
    <div class="bet">
        <!--<van-row class="bet">-->
        <!--<van-col v-for="item in lists" :key="item.resource_uri" span="12">-->
        <!--<van-button type="primary" size="small" @click="bet(item.resource_uri)">{{'抽' + item.name +-->
        <!--` ${item.price / 100 }/次` }}-->
        <!--</van-button>-->
        <!--</van-col>-->
        <!--</van-row>-->


        <van-dialog
                v-model="show"
                align="center"
                title="恭喜你获得了"
                show-cancel-button
                cancel-button-text="卖出游戏"
                confirm-button-text="存入库存"
                :before-close="beforeClose">
            <img :src="detail.icon" v-if="detail.icon" class="chosen_icon" alt="">
            <img :src="imgDefatult" class="chosen_icon" v-else alt="">
            <div class="detail">
                <div class="chosen_name">游戏名: {{detail.title}}</div>
                <div class="chosen_price">回收价格: {{detail.price / 100}}</div>
            </div>
        </van-dialog>
    </div>
</template>

<script>
import {
  raffle,
  getRaffles,
  resourceDetail,
  getPackageDetail,
  recycle
} from "@/apis/apis";
import bus from "@/utils/bus";
// import { mapState } from "vuex";

export default {
  data() {
    return {
      show: false,
      lists: [],
      detail: {
        name: "",
        icon: "",
        price: "",
        resource_uri: ""
      },
      imgDefatult: 'https://steamkeymarket.oss-cn-hangzhou.aliyuncs.com/steamkey.png'
    };
  },
  methods: {
    beforeClose(action, done) {
      if (action === "confirm") {
        this.$toast({
          // position: "bottom",
          message: "存入成功"
        });
        bus.$emit("bet_finish");
        done();
      } else {
        recycle(this.detail.resource_uri)
          .then(res => {
            if (res._status === 0) {
              this.$toast({
                // position: "bottom",
                duration: 1000,
                message: "卖出成功"
              });
            } else {
              this.$toast({
                // position: "bottom",
                duration: 1000,
                message: res._message
              });
            }
            bus.$emit("bet_finish");
            done();
          })
          .catch(() => {
            this.$toast({
              // position: "bottom",
              message: "网络错误"
            });
            bus.$emit("bet_finish");
            done();
          });
      }
    },
    bet_finish() {
      console.log(this);
      bus.$emit("bet_finish");
    },
    bet(resource_uri) {
      if (resource_uri) {
        this.bet_finish();
        return this.$toast({
          // position: "bottom",
          message: "网路错误"
        });
      }
      const show_name = this.$route.params.name;
      if (show_name) {
        // 开始抽奖
        this.$toast({
            type:'loading',
            text:'正在努力的开奖中...'
        })
        return raffle({ show_name })
          .then(res => {
            if (res._status === 2005) {
              this.$toast({
                message: "余额不够啦,先充点宝石吧",
                // position: "bottom"
              });
              return setTimeout(() => this.$router.push("/personal"), 400);
            }
            if (res._status !== 0) {
              this.$toast.clear;
              return this.$toast({
                message: res._reason,
              });
            }
            resourceDetail(res.key)
              .then(_res => {
                this.detail = _res;
                this.$toast.clear;
                this.show = true;
              })
              .catch(() => {
                this.$toast.clear;
                return Promise.reject();
              });
          })
          .catch(() => {
            this.$toast({
              message: "抽奖失败,不会扣除您的余额",
              // position: "bottom"
            });
          });
      } else {
        this.bet_finish();
        this.$toast({
          message: "发生错误，请退回首页重试",
          // position: "bottom"
        });
      }
    }
  },
  mounted() {
    bus.$on("bet", resource_uri => {
      this.bet(resource_uri);
    });
  }
};
</script>


<style lang="scss">
@import "@/style/var.scss";

.bet {
  .chosen_name {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
  }

  .chosen_icon {
    width: 100%;
    padding: 15px;
  }

  .chosen_price {
    font-size: 14px;
    color: $yellow;
  }

  .van-dialog {
    width: 70%;
  }

  .detail {
    padding: 0 15px;
    text-align: left;
  }

  .van-dialog__header {
    color: #ef6a6e;
    padding-top: 0;
    line-height: 40px;
    font-size: 25px;
    margin-top: 25px;
    pading-bootom: 15px;
    padding-left: 15px;
  }

  .van-dialog__footer {
    padding-top: 15px;
    background-color: transparent;
  }

  .van-button--default {
    color: #fff;
    width: 100px;

    &.van-dialog__cancel {
      background-color: $package_background_color;
      color: $button_background_color;
    }
  }

  [class*="van-hairline"]::after {
    border: none;
  }

  .van-dialog__cancel,
  .van-dialog__confirm {
    height: 36px;
    line-height: 36px;
  }
}
</style>
